<template>
  <entity-view :operator-type="operatorType" form-item-width="50%" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }"
    :model="wechatActivitiesInfo" @submit="submit" :rules="rules" ref="form">
    <form-item label="商户号" v-model="wechatActivitiesInfo.mchntNo" prop="mchntNo"></form-item>
    <form-item label="微信商户号" v-model="wechatActivitiesInfo.mchntNo" prop="mchntNo"></form-item>

    <form-item label="收单机构" input-type="select" v-model="wechatActivitiesInfo.signInstId" prop="signInstId"
      :options="signInstIdList" :showSearch="true" disabled></form-item>

    <form-item label="活动ID" input-type="select" v-model="wechatActivitiesInfo.wechatActivityId" prop="wechatActivityId"
      :options="wechatActivityIdList" @change="(value) => handleChange(value, 'wechatActivityId')"></form-item>

    <form-item label="学校资历证明">
      <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card"
        :file-list="wechatW0ImageList" :before-upload="beforeUpload" :customRequest="logoImgUpload"
        @change="value => handleImageChange(value, 'w0')" @preview="handlePreview">
        <div v-if="fileList.length < 5">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            上传
          </div>
        </div>
      </a-upload>

    </form-item>
    <form-item label="合作资质证明">
      <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card"
        :file-list="wechatW1ImageList" :before-upload="beforeUpload" :customRequest="logoImgUpload"
        @change="value => handleImageChange(value, 'w1')" @preview="handlePreview">
        <div v-if="fileList.length < 5">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            上传
          </div>
        </div>
      </a-upload>
    </form-item>
    <form-item label="优惠费率承诺函">
      <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card"
        :file-list="wechatW2ImageList" :before-upload="beforeUpload" :customRequest="logoImgUpload"
        @change="value => handleImageChange(value, 'w2')" @preview="handlePreview">
        <div v-if="fileList.length < 5">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            上传
          </div>
        </div>
      </a-upload>
    </form-item>
    <form-item label="食堂内部用餐环境照片">
      <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card"
        :file-list="wechatW3ImageList" :before-upload="beforeUpload" :customRequest="logoImgUpload"
        @change="value => handleImageChange(value, 'w3')" @preview="handlePreview">
        <div v-if="fileList.length < 5">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            上传
          </div>
        </div>
      </a-upload>
    </form-item>

    <form-item label="食堂门头照片">
      <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card"
        :file-list="wechatW4ImageList" :before-upload="beforeUpload" :customRequest="logoImgUpload"
        @change="value => handleImageChange(value, 'w4')" @preview="handlePreview">
        <div v-if="fileList.length < 5">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            上传
          </div>
        </div>
      </a-upload>
    </form-item>
    <div style="flex: 1">
      <form-item label="补充材料说明" style="width: 100%" />
      <form-item label="补充材料" style="width: 100%">
        <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card"
          :file-list="wechatW5ImageList" :before-upload="beforeUpload" :customRequest="logoImgUpload"
          @change="value => handleImageChange(value, 'w5')" @preview="handlePreview">
          <div v-if="fileList.length < 5">
            <a-icon type="plus" />
            <div class="ant-upload-text">
              上传
            </div>
          </div>
        </a-upload>
      </form-item>
    </div>
  </entity-view>
</template>
<script>
import EntityView from "@/components/common/entityView/EntityView.vue";
import FormItem from "@/components/common/entityView/FormItem.vue";

export default {
  name: "wechatActivitiesOperation",
  components: {
    EntityView,
    FormItem
  },
  props: {
    query: Object
  },
  data: function () {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: [
        {
          uid: "-1",
          name: "image.png",
          status: "done",
          url:
            "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
        {
          uid: "-2",
          name: "image.png",
          status: "done",
          url:
            "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        }
      ],
      wechatW0ImageList: [
        {
          uid: "-1",
          name: "image.png",
          status: "done",
          url:
            "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
        {
          uid: "-2",
          name: "image.png",
          status: "done",
          url:
            "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        }
      ],
      wechatW1ImageList: [],
      wechatW2ImageList: [],
      wechatW3ImageList: [],
      wechatW4ImageList: [],
      wechatW5ImageList: [],
      operatorType: "add",
      loading: false,
      instId: "",
      modalTitle: "",
      modalVisible: true,
      licenceImageUrl: "",
      wechatActivitiesInfo: {
        instId: "",
        mchntNo: "",
        wechatActivityId: "",
        belongInstName: "",
        signInstId: "",
        belongAreaName: "",
        managementScope: "",
        cancelReason: "",
        auditRefuseReason: ""
      },
      scrollPage: 1,
      rules: {
        mchntNo: [{ message: "请输入商户号", trigger: "blur" }],
        wechatMchntNo: [{ message: "请输入微信商户号", trigger: "blur" }],
        wechatActivityId: [{ message: "请选择活动ID", trigger: "blur" }]
      },
      wechatActivityIdList: [],
      signInstIdList: [],
      managementScopeList: [],
    };
  },
  methods: {
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      })
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleImageChange({ fileList }, type) {
      if (type == 'w0') {
        this.wechatW0ImageList = fileList
      }
      if (type == 'w1') {
        this.wechatW1ImageList = fileList
      }
      if (type == 'w2') {
        this.wechatW2ImageList = fileList
      }
      if (type == 'w3') {
        this.wechatW3ImageList = fileList
      }
      if (type == 'w4') {
        this.wechatW4ImageList = fileList
      }
      if (type == 'w5') {
        this.wechatW5ImageList = fileList
      }
    },
    beforeUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/bmp";
      if (!isJPG) {
        this.$message.error("请上传图片文件");
      }
      return isJPG;
    },
    async logoImgUpload({ action, file, onSuccess, onError, onProgress }) {
      console.log("%%%%", action, file, onSuccess, onError, onProgress);
      const formData = new FormData();
      formData.append("imgFile", file);
      formData.append("imageType", "03");
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",
        formData
      );
      console.log(res);
      /*
      const formData = new FormData();
      formData.append("imgFile", file);
      // 二维码模板04 中心logo 03
      formData.append("imageType", "03");
      formData.append("instId", this.query.instId);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",
        formData
      );
      if (res.data.code === "100000") {
        // 请求参数赋值
        this.logoPath = res.data.data.imageLocalPath;
        this.applyBatchNo = this.selectedInfo.qrCodeBatchNo;
        // 将logo图片路径保存到二维码信息表
        this.setUrl(
          this.query.instId,
          this.qRcode,
          this.applyBatchNo,
          res.data.data.imageLocalPath
        );
        //
        this.licenceImageUrl = res.data.data.imageData;
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
      */
    },
    handleChange(value, param) {
      this.wechatActivitiesInfo[param] = value;
      if (param === "signInstId") {
        var obj = this.signInstIdList.find(function (obj) {
          return obj.id === value;
        });
        this.wechatActivitiesInfo.belongAreaName = obj.name.split(" - ")[1];
      }
      if (param === "wechatActivityId") {
        var obj = this.wechatActivityIdList.find(function (obj) {
          return obj.id === value;
        });
        this.wechatActivitiesInfo.belongInstName = obj.name;
      }
    },
    async submit() {
      let res;
      switch (this.operatorType) {
        case "add":
          res = await this.add();
          break;
        case "edit":
          res = await this.edit();
          break;
        case "view":
          res = true;
          break;
        case "cancel":
          res = await this.cancel();
          break;
        default:
          break;
      }
      return res;
    },
    async add() {
      try {
        const res = await this.$refs.form.validate();
        if (res) {
          const params = {
            ...this.wechatActivitiesInfo,
            optFlag: "add"
          };
          const res = await this.$post(
            "/admin/merParam/tradeAreaInfo/edit",
            params
          );
          if (res.data.code != "100000") {
            this.$message.error(res.data.message);
            return false;
          } else {
            this.$message.success("新增成功！");
            return true;
          }
        }
      } catch (e) {
        console.error(e);
      }
    },
    async edit() {
      const res = await this.$refs.form.validate();
      if (res) {
        const params = {
          ...this.wechatActivitiesInfo,
          optFlag: "upd"
        };
        const res = await this.$post(
          "/admin/merParam/tradeAreaInfo/edit",
          params
        );
        if (res.data.code != "100000") {
          this.$message.error(res.data.message);
          return false;
        } else {
          this.$message.success("新增成功！");
          return true;
        }
      }
    },
    async cancel() {
      const res = await this.$refs.form.validate();
      if (res) {
        const params = {
          id: this.wechatActivitiesInfo.id,
          ...this.wechatActivitiesInfo,
          optFlag: "cancel"
        };
        const res = await this.$post(
          "/admin/merParam/tradeAreaInfo/edit",
          params
        );
        if (res.status === 200) {
          this.$message.success("保存成功！");
          return true;
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      }
    },
    resetFields() {
      return this.$refs.form && this.$refs.form.resetFields();
    },
    setOperatorType(type) {
      this.operatorType = type;
    },
    // async setBeanInfo({ ...wechatActivitiesInfo }, instId) {
    //   this.wechatActivitiesInfo = wechatActivitiesInfo;
    //   this.instId = instId;
    //   await this.getInstIdOrganizationList();
    //   await this.getManagementScopeList();
    //   await this.getsignInstIdList();
    //   if (this.operatorType === "add") {
    //     await this.getEditList();
    //     return;
    //   }
    //   // await this.getOne();
    // },
    // async getOne() {
    //   try {
    //     const res = await this.$get("/admin/merParam/tradeAreaInfo/edit", {
    //       id: this.wechatActivitiesInfo.id,
    //       optFlag: "detail"
    //     });
    //     this.wechatActivitiesInfo = res.data.entity || {};
    //   } catch (e) {
    //     console.error(e);
    //   }
    // },
    // async getEditList() {
    //   try {
    //     const res = await this.$get("/admin/merParam/tradeAreaInfo/edit", {
    //       optFlag: "add",
    //       instId: this.instId
    //     });
    //     if (res.status === 200) {
    //       // debugger
    //       this.wechatActivitiesInfo = res.data.entity || {};
    //     }
    //   } catch (e) {
    //     console.error(e);
    //   }
    // },
    // async getInstIdOrganizationList() {
    //   try {
    //     const res = await this.$get(
    //       "/admin/merParam/UpmpOrganization/instIdOrganizationSelect2List",
    //       {
    //         q: encodeURIComponent(`&${this.instId}`)
    //       }
    //     );
    //     if (res.status === 200) {
    //       this.wechatActivityIdList = res.data.results.map(i => {
    //         i.value = i.id;
    //         return i;
    //       });
    //     }
    //   } catch (e) {
    //     console.error(e);
    //   }
    // },
    // async getManagementScopeList() {
    //   try {
    //     const res = await this.$get(
    //       "/admin/mcmp/bMchntBaseInfo/unionMerGrpSelect2List",
    //       {
    //         q: encodeURIComponent(`&${this.instId}`)
    //       }
    //     );
    //     if (res.status === 200) {
    //       this.managementScopeList = res.data.rows.map(i => {
    //         i.name = i.grpNo + " - " + i.grpDesc;
    //         i.value = i.grpNo;
    //         return i;
    //       });
    //     }
    //   } catch (e) {
    //     console.error(e);
    //   }
    // },
    //通过接口获取数据
    // async getsignInstIdList(value = "") {
    //   var param = {
    //     q: encodeURIComponent(value + "&${this.instId}"),
    //     pageSize: 100
    //   };
    //   this.$get("/admin/merParam/tradeAreaInfo/unionAreaSelect2List", param)
    //     .then(res => {
    //       if (res && res.data) {
    //         this.signInstIdList = res.data.results.map(i => {
    //           i.name = i.id + " - " + i.name;
    //           i.value = i.id;
    //           return i;
    //         });
    //       }
    //     })
    //     .catch(e => {
    //       this.$message.error("查询维护信息失败：" + e);
    //     });
    // }
  }
};
</script>

<style scoped>
</style>
